import React, { useState } from 'react'
import Link from 'next/link'
import Router from 'next/router'
import '../styles/test.css'

const Home = () => {
  function goto() {
    // Router.push('/lady?name=波多野结衣')
    Router.push({
      pathname: '/lady',
      query: {
        name: '波多野结衣'
      }
    })
  }

  const [color, setColor] = useState('blue')
  const changeColor = () => {
    setColor(color == 'blue' ? 'red' : 'blue')
  }
  return (
    <>
      <div>我是首页</div>
      <div>
        <Link href="/ListA">A页面</Link>
      </div>
      <div>
        <Link href="/ListB">B页面</Link>
      </div>
      <button onClick={() => Router.push('/ListA')}>去A页面</button>
      <div>
        <Link href="/lady?name=波多野结衣">波多野结衣</Link>
      </div>
      <div>
        <Link href="/lady?name=苍井空">苍井空</Link>
      </div>
      <button onClick={goto}>波多野结衣</button>
      <div>
        <Link href="#ListA">hash</Link>
      </div>
      <style jsx>
        {`
          div {
            color: ${color};
          }
        `}
      </style>
      <button onClick={changeColor}>改变颜色</button>
    </>
  )
}

export default Home
